import './EngineeringA01.scss'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { Input, Button, notification } from 'antd'

import { Http } from '../../../Api'
const { TextArea } = Input

const json = [
    { uuid: 1, title: '质量目标', content: '内容' },
    { uuid: 2, title: '安全目标', content: '内容' },
    { uuid: 3, title: '2024 年进度目标', content: '内容' },
    { uuid: 4, title: '2025 年进度目标', content: '内容' },
    { uuid: 5, title: '2026 年进度目标', content: '内容' },
    { uuid: 6, title: '呼兰河大桥形象进度目标', content: '内容' },
]

export const EngineeringA01 = () => {
    const [api, contextHolder] = notification.useNotification()

    const [Data, setData] = useState()

    const { runAsync: getData } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res) {
                setData(res)
            } else {
                const data = JSON.stringify(JSON.stringify(json))
                setData(json)
                posData({ url: 'posSaveJsonInfoByUuid', data, path: ['EngineeringA01'] })
            }
        },
    })

    const { runAsync: posData } = useRequest(Http, {
        manual: true,
        onSuccess: () => {
            api.success({ key: 'success', message: '数据保存成功!' })
            getData({ url: 'getJsonInfoByUuid', data: { uuid: 'EngineeringA01' } })
        },
    })

    useMount(() => {
        getData({ url: 'getJsonInfoByUuid', data: { uuid: 'EngineeringA01' } })
    })

    const onSubmit = () => {
        const data = JSON.stringify(JSON.stringify(Data))
        posData({ url: 'posSaveJsonInfoByUuid', data, path: ['EngineeringA01'] })
    }

    return (
        <div className="EngineeringA01">
            {contextHolder}
            {Data &&
                Data.map(({ uuid, title, content }) => {
                    const data = Data.find(v => v.uuid === uuid)
                    return (
                        <div key={uuid}>
                            <div className="Label">
                                <div>标题 : </div>
                                <Input
                                    defaultValue={title}
                                    onChange={e => {
                                        data.title = e.target.value
                                        setData([...Data])
                                    }}
                                />
                            </div>
                            <div className="Label">
                                <div>内容 : </div>
                                <TextArea
                                    rows={4}
                                    defaultValue={content}
                                    onChange={e => {
                                        data.content = e.target.value
                                        setData([...Data])
                                    }}
                                />
                            </div>
                        </div>
                    )
                })}
            <div className="Button">
                <Button type="primary" onClick={onSubmit}>
                    保存数据
                </Button>
            </div>
        </div>
    )
}
